<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <style>
        thead tr th{text-align: center!important;}
        tr td{text-align: center!important;}
        .editThis, .updateThis, .deleteThis {
			border: 1px solid #fff;
		}

		.operation button {
			margin: 3px;
		}
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form action="/account/businessBank" id="seachFrom" class="layui-form">
                    <div class="layui-card-body">
                    	<div class="test-table-reload-btn layui-col-sm-offset10" style="margin-bottom: 10px;">
	                        <button class="layui-btn editThis" type="button" style="margin-left: 10px" data-id="0">新增银行卡</button>
	                    </div>
                        <%-- 查询条件设置 --%>
                        <div class="layui-container" style="padding-bottom: 50px">
                            <div class="layui-col-md12">
                                <div class="layui-col-md4">
                                    <div class="layui-col-sm3" style="line-height: 38px">操作类型：</div>
                                    <div class="layui-col-sm7">
                                        <select name="typeId" class="select">
                                            <option value="">全部</option>
                                            <c:forEach items="${bankType}" var="b">
                                                <option value="${b.id}" <c:if test="${bankDetail.typeId==b.id}">selected</c:if>>${b.bankName}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md4">
                                    <div class="layui-col-sm6">
                                        <button class="layui-btn layui-btn" type="submit">查询</button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12"><hr></div>
                        </div>
                        <%-- 数据展示 --%>
                        <table class="layui-table">
                            <thead>
	                            <tr>
	                            	<td>真实姓名</td>
	                            	<td>证件号</td>
	                            	<td>银行卡号</td>
	                            	<td>银行名称</td>
	                            	<td>支行</td>
	                            	<td>预留手机号</td>
	                            	<td>logo</td>
	                            	<td>操作</td>
	                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.records}" var="l">
                                <tr>
                                	<td>${l.realName }</td>
                                	<td>${l.idcard }</td>
                                	<td>${l.bankCard }</td>
                                	<td>${l.bankName }</td>
                                	<td>${l.bankAddr }</td>
                                	<td>${l.phone }</td>
                                	<td>
                                		<img alt="" src="${l.logo }">
                                	</td>
                                	<td>
                                		<div class="operation">
	                                		<button type="button" data-id="${l.id}" data-type="editThis" type="button" class="layui-btn layui-btn-normal layui-btn-sm editThis">编辑</button>
	                                		<br>
	                                		<button type="button" data-id="${l.id}" data-type="deleteThis" type="button" class="layui-btn layui-btn-danger layui-btn-sm deleteThis">删除</button>
                                		</div>
                                	</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <div class="test-table-reload-btn" style="margin-top: 10px;">
                            <%@include file="../paging.jsp" %>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','laydate'], function(){
        var $ = layui.$,layer = layui.layer,form = layui.form,
            element = layui.element,laydate=layui.laydate;
        form.render('select');
        element.render();
        
        var active = {
        	editThis : function(id) {
				layer.open({
					title : '新增/编辑银行卡',
					type : 2,
					area : [ '550px', '520px' ],
					content : '/account/editBank?bankDetailId='+id
				});
			},
			deleteThis : function(bankDetailId) {
				layer.confirm('确认要删除吗？', function(index){
					$.ajax({
			            url: "/account/deleteBankDetail",
			            data: {'bankDetailId': bankDetailId},
			            dataType: "json",
			            type: "post",
			            success: function (data) {
			            	if (data.status) {
			                    layer.close(index);
			                    layer.msg(data.desc, {icon: 1})
			                    setTimeout(function () {
			                        window.location.reload();
			                    }, 1000)
			                } else {
			                    layer.close(index);
			                    layer.msg(data.desc, {icon: 2})
			                }
			            }
			        })
                });
			}
		};
        
        // 编辑银行卡
        $(".editThis").on('click', function() {
			var editThis = "editThis";
			var id = $(this).data('id');
			active[editThis] && active[editThis].call(this, id);
		});
        
        // 删除银行卡
		$(".deleteThis").on('click', function() {
			var deleteThis = $(this).data('type');
			var id = $(this).data('id');
			active[deleteThis] && active[deleteThis].call(this, id);
		});
    });
</script>
</body>
</html>